import "./Footer.css"

const Footer = ({isCheckedAll, checkedTotal, total, changeCheckedAll, deleteAllTodo, deleteCheckedTodo}) => {
    /*
    * 点击复选框的回调函数
    * */
    const changeChecked = () => {
        const checked = !isCheckedAll
        changeCheckedAll(checked)
    }
    /*
    * 点击删除所有todo的回调函数
    * */
    const deleteAll = () => {
        deleteAllTodo()
    }
    /*
     * 点击删除已经完成todo的回调函数
     * */
    const deleteChecked = () => {
        deleteCheckedTodo()
    }
    return (
        <div className="footer">
            <div className="checked">
                <input type="checkbox" checked={isCheckedAll} onChange={changeChecked}/>
            </div>
            <div className="text">
                已经完成{checkedTotal}全部{total}
            </div>
            <button type="button" className="layui-btn layui-bg-red layui-btn-sm" onClick={deleteChecked}>删除已完成</button>
            <button type="button" className="layui-btn layui-bg-red layui-btn-sm" onClick={deleteAll}>删除所有</button>
        </div>
    )

}

export default Footer;
